<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<title>HTML5新增元素</title>
	</head>

	<body>
		<div>
			<h3>新增的多媒体元素</h3>

			<!-- 定义图形，比如图表和其他图像，该标签只是图形容器，必须使用脚本来绘制图形 -->
			<canvas></canvas>

			<!-- 定义音频内容 -->
			<audio src="" autoplay loop controls muted>抱歉，您的浏览器不支持 audio HTML5 新标签，请使用最新版浏览器</audio>

			<!-- 定义视频内容 -->
			<video src="" poster="" autoplay loop controls muted>抱歉，您的浏览器不支持 video HTML5 新标签，请使用最新版浏览器</video>

			<!-- 规定外部文本轨道（如字幕）- 可当作媒体元素—<audio> 和 <video>的子元素来使用 -->
			<track src="" kind="" label="" srclang="" default>

			<!-- 定义多媒体资源 - 可为 <picture>, <audio> 或者 <video> 元素指定多个媒体资源 -->
			<source src="" type="" />
		</div>

		<div>
			<h3>新增的表单元素</h3>

			<input list="browsers">
			<!-- 定义选项列表，需要与input标签联合使用 -->
			<datalist id="browsers">
				<option value="Internet Explorer">
				<option value="Firefox">
				<option value="Chrome">
				<option value="Opera">
				<option value="Safari">
			</datalist>

			<form oninput="c.value=parseInt(a.value)+parseInt(b.value)">
				0<input type="range" id="a">100
				+<input type="number" id="b" value="0">
				<!-- 定义不同类型的输出，比如脚本的输出 -->
				=<output id="c" for="a b"></output>
			</form>
		</div>

		<div>
			<h3>新增的语义和结构元素</h3>

			<!-- 定义文档的头部区域 -->
			<header>
				<!-- 定义标题组 -->
				<hgroup></hgroup>
				<!-- 定义导航链接的部分 -->
				<nav></nav>
			</header>
			<!-- 用于描述文档或文档某个部分的细节 -->
			<details>
				<!-- 标签包含 details 元素的标题 -->
				<summary></summary>
			</details>
			<!-- 定义文档中的节 -->
			<section>
				<!-- 定义页面的侧边栏内容 -->
				<aside></aside>
				<!-- 定义页面独立的内容区域 -->
				<article></article>
			</section>
			<!-- 定义文档的尾部区域 -->
			<footer></footer>

			<!-- 规定独立的流内容（图像、图表、照片、代码等等） -->
			<figure>
				<img src="">
				<!-- 定义 <figure> 元素的标题 -->
				<figcaption></figcaption>
			</figure>

			<!-- 定义带有记号的文本 -->
			<mark>mark 标签</mark>

			<!-- 定义度量衡 -->
			<meter min="0" max="10" low="3" high="7" optimum="5" value="8"></meter>

			<!-- 定义任何类型的任务的进度 -->
			<progress max="100" value="30"></progress>

			<!-- 定义 ruby 注释（中文注音或字符） -->
			<ruby>
				汉 <rp>(</rp>
				<rt>Han</rt>
				<rp>)</rp>
				字 <rp>(</rp>
				<rt>zi</rt>
				<rp>)</rp>
			</ruby>

			<!-- 定义日期或时间 -->
			<time datetime="2020-02-13">生日</time>

			<!-- 规定在文本中的何处适合添加换行符 -->
			<wbr/>

			<!-- bdi 指的是 bidi 隔离（Bi-directional Isolation） -->
			<!-- 设置一段文本，使其脱离其父元素的文本方向设置 -->
			<bdi>目前只有 Firefox 和 Chrome 浏览器支持 bdi 标签</bdi>
			<!-- 定义用户可能调用的命令 -->
			<command>只有 IE 9 支持 command 标签</command>
			<!-- 定义对话框 -->
			<dialog open>目前只有 Chrome 和 Safari 6 支持 dialog 标签</dialog>
		</div>
	</body>
</html>
